<template>
  <div class="bar-diagram" ref="parent">
      <svg class="bar"> 
      </svg>
  </div>
</template>

<script>
import d3 from "d3";
import Color from "color";

export default {
  data() {
    return {};
  },
  mounted: function() {
    const ParentSelection = d3.select(this.$refs["parent"]);
    const that = this;
    const innerWidth = 1500,
      innerHeight = 340;
    const margins = { top: 30, left: 10, right: 10, bottom: 30 };
    const data = [1, 2, 9, 8, 6, 10, 4, 25, 17, 12, 20].map((e,i,a)=>(Math.random()*100*e)%e*(a.length-i));
    +(function drawBar(svg) {
      svg
        .attr("width", innerWidth + margins.left + margins.right)
        .attr("height", innerHeight + margins.top + margins.bottom);
      const rectStep = innerWidth / data.length;
      var colorScale = d3.scale
        .category10()
        .domain([d3.min(data), d3.max(data)]);
      var yScale = d3.scale
        .linear()
        .domain([d3.max(data), 0])
        .range([0, innerHeight]);
      var xScale = d3.scale
        .linear()
        .domain([0, data.length])
        .range([0, innerWidth]);
      svg
        .selectAll("rect")
        .data(data)
        .enter()
        .append("rect")
        .attr("x", (d, i) => {
          return margins.left + i * rectStep;
        })
        .attr("y", d => {
          return margins.top + yScale(d);
        })
        .attr("height", d => {
          return innerHeight - yScale(d);
        })
        .attr("width", rectStep - 1)
        .attr("fill", d => {
          return colorScale(d);
        })
        .attr("raw", d => d);
      var xAxis = d3.svg
        .axis()
        .scale(xScale)
        .orient("bottom");

      svg
        .append("g")
        .classed("axis", true)
        .attr("transform", () => {
          return (
            "translate(" +
            margins.left +
            "," +
            (margins.top + innerHeight) +
            ")"
          );
        })
        .call(xAxis);
      var yAxis = d3.svg
        .axis()
        .scale(yScale)
        .orient("left");
      svg
        .append("g")
        .classed("axis", true)
        .attr("transform", () => {
          return "translate(" + margins.left + "," + margins.top + ")";
        })
        .call(yAxis);
    })(ParentSelection.select("svg.bar"));
  }
};
</script>

<style lang="scss">
.bar-diagram {
  svg.bar {
    g.axis {
      path,
      line {
        fill: none;
        stroke: hsla(330, 113%, 26%, 1);
        shape-rendering: crispEdges;
      }
      text {
        fill: #ff0080;
        font-size: 11px;
        font-family: sans-serif;
      }
    }
  }
}
</style>

